<template>
	<view>
		<view class="head">
			<image @click="fanhui" :style="{ top: safeTop }" class="fanhui-img" src="../../static/index/fanhuib.png" mode=""></image>
			<view class="head-name" :style="[{ paddingTop: safeTop }, { height: menuH }, { lineHeight: menuH }]">预付款开台</view>
		</view>
		
		<view class="content">
			<view class="sum">98.00</view>
			<view class="sum-text">预支付金额</view>
			<view class="tab z-padding-lr-16 z-margin-t-24">台球桌 6号桌</view>
		</view>
		
		<view class="cost">
			<view class="balance-box z-flex-x-s-b">
				<view class="balance-l">余额 <text class="residue">（剩余：500.00）</text> </view>
				<view class="balance-r">-￥0.00</view>
			</view>
			<view class="wire"></view>
			<view class="balance-box z-flex-x-s-b">
				<view class="balance-l">微信 <text class="residue"></text> </view>
				<view class="balance-r">-￥0.00</view>
			</view>
		</view>
		
		<view class="yhq-box z-flex-x-s-b z-margin-t-24">
			<view class="yhq-l">
				<image src="../../static/index/yhq.png" mode=""></image>
				优惠券
			</view>
			<view class="yhq-r">
				暂无可用优惠券
				<!-- <image src="../../static/index/hy-right.png" mode=""></image> -->
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		
		<view class="pay-btn-box">
			<view class="pay-btn">
				<view class="btn-l">￥ <text>98.0</text> </view>
				<view class="btn-r">立即支付</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			menuH: uni.getStorageSync('menuH') || '',
			safeTop: uni.getStorageSync('safeTop') || 20 + 'px'
		};
	},
	methods: {
		fanhui(){
			uni.navigateBack()
		}
	}
};
</script>

<style lang="scss">
.head {
	width: 750rpx;
	height: 240rpx;
	background: linear-gradient(to right, #e6f6f2, #ddf0f5);
	position: relative;
	.fanhui-img {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		margin-left: 32rpx;
	}
	.head-name {
		font-weight: bold;
		font-size: 34rpx;
		color: #203460;
		text-align: center;
	}
}
.content {
	width: 750rpx;
	background: #FFFFFF;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	text-align: center;
	font-weight: 500;
	font-size: 24rpx;
	position: relative;
	top: -40rpx;
	.sum {
		font-weight: bold;
		font-size: 64rpx;
		color: #FF7B18;
		padding-top: 90rpx;
	}
	.sum-text {
		color: #A4A9B7;
	}
	.tab {
		display: inline-block;
		color: #6B738B;
		height: 48rpx;
		line-height: 48rpx;
		margin: auto;
		background-color: #F6F8FC;
	}
}

.cost {
	width: 622rpx;
	padding: 32rpx;
	background: #F7F8FA;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	margin: auto;
	.balance-box {
		font-weight: 500;
		font-size: 30rpx;
		color: #1C274C;
		.balance-l {
			.residue {
				font-weight: 500;
				font-size: 26rpx;
				color: #A4A9B7;
			}
		}
		.balance-r {
			font-weight: bold;
			font-size: 30rpx;
			color: #FF7B18;
		}
	}
	.wire {
		width: 622rpx;
		height: 1rpx;
		background-color: #EDEEF1;
		margin: 32rpx 0;
	}
}

.yhq-box {
	width: 622rpx;
	padding: 32rpx;
	background: #F7F8FA;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	margin: auto;
	.yhq-l {
		font-weight: 500;
		font-size: 30rpx;
		color: #1C274C;
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 24rpx;
			vertical-align: middle;
		}
	}
	.yhq-r {
		font-weight: 500;
		font-size: 28rpx;
		color: #A4A9B7;
		display: flex;
		align-items: center;
		image {
			width: 16rpx;
			height: 16rpx;
			margin-left: 16rpx;
		}
	}
}

.pay-btn-box {
	width: 100%;
	position: absolute;
	bottom: 0rpx;
	left: 50%;
	transform: translate(-50%,-50%);
	.pay-btn {
		width: 686rpx;
		margin: auto;
		display: flex;
		line-height: 106rpx;
		.btn-l {
			width: 420rpx;
			height: 106rpx;
			background: #102820;
			border-radius: 20rpx 0rpx 0rpx 20rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			padding-left: 32rpx;
			text {
				font-weight: bold;
				font-size: 40rpx;
			}
		}
		.btn-r {
			width: 234rpx;
			height: 106rpx;
			background: #4BC264;
			border-radius: 0rpx 16rpx 16rpx 0rpx;
			font-size: 34rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
}
</style>
